<template>
    <div class="masks" v-show="receiveSpreadInfo.ismask">
      <div class="info">
        <p>{{text}}</p>
        <div class="mobile">
          <input
            type="text"
            placeholder="电话"
            v-model="mobile"
            @blur="blurInput"
            @focus="focusClick"
          >
        </div>
        <div class="vcode">
          <input
            type="text"
            placeholder="输入验证码"
            v-model="vcode"
            @blur="blurInput"
            @focus="focusClick"
          >
          <span v-show="!showVcode" @click="getVcode">{{getVcodes}}</span>
          <span v-show="showVcode">{{counts}}s</span>
        </div>
        <div class="btns">
          <span class="submit" @click="submit">提交</span>
          <span class="sclose" @click="close">关闭</span>
        </div>
      </div>
    </div>
</template>
<script>
import utils from "@/utils/utils";
import Cookies from "js-cookie";
import { MessageBox } from "mint-ui";
import * as config from "../config";
import request from "@/utils/request";
export default {
    props: {'receiveInfo':Object},
    data(){
        return {
            isFocus: false,
            mobile: '',
            vcode: '',
            showVcode: false,
            counts: "",
            timer: null,
            getVcodes: "获取验证码",
            // ismask: true,
            text: '恭喜你获得至多200元的话费礼包',
            receiveSpreadInfo:{
                ouid: '', //销售的openid
                openid: Cookies.get('openid'),
                ismask: this.receiveInfo.ismask,
            }
        }
    },
    watch: {
       receiveInfo(val){
          console.log(val.ismask)
        
       } 
    },
    methods:{
        focusClick(e) {
            this.isFocus = true;
            if (utils.browser.versions.ios) {
                setTimeout(function() {
                e.target.scrollIntoView(true);
                }, 100);
            }
        },
        blurInput(e) {
        this.isFocus = false;
        this.$nextTick(() => {
            if (utils.browser.versions.ios && !this.isFocus) {
            setTimeout(function() {
                e.target.scrollIntoView(false);
            }, 300);
            }
        });
        },
        //获取手机验证码/activity/logic/takeMobileVerifyCode
        getActPhoneVCode() {
            const _self = this;
            if (!_self.mobile) {
                return MessageBox.alert("请输入手机号", "提示");
            } else {
                request
                .get(
                    `${
                    _self.global.API_TJKEPPEL_ACT_URL
                    }activity/logic/takeMobileVerifyCode`,
                    {
                    mobile: _self.mobile
                    }
                )
                .then(function(data) {});
        }
        },
        //获取验证码
        getVcode() {
            const _self = this;
            const TIME_COUNT = 60;
            _self.getActPhoneVCode();
            if (!_self.timer && _self.mobile) {
                _self.counts = TIME_COUNT;
                _self.showVcode = true;
                _self.timer = setInterval(() => {
                if (_self.counts > 0 && _self.counts <= TIME_COUNT) {
                    _self.counts--;
                } else {
                    _self.showVcode = false;
                    _self.getVcodes = "重新获取";
                    clearInterval(_self.timer);
                    _self.timer = null;
                }
                }, 1000);
            }
        },
        //提交手机号
        submit() {
            let _self = this;
            if (!_self.mobile) {
                return MessageBox.alert("请输入手机号", "提示");
            } else {
                if (!utils.isMobile(_self.mobile)) {
                return MessageBox.alert("请填写正确的手机号", "提示");
                }
            }
            if (!_self.vcode) {
                return MessageBox.alert("请输入验证码", "提示");
            }
            let query = {
                mobile: _self.mobile,
                verCode: _self.vcode,
                prizeCode: "prize_3"
            };
            let obj = JSON.stringify(query);
            request
                .post(
                `${
                    _self.global.API_TJKEPPEL_ACT_URL
                }activity/logic/takeTelFareAndCheckVCode`,
                obj
                )
                .then(function(data) {
                    MessageBox.alert("话费稍后会发送到你的手机！", "提示").then(
                        function() {
                        config.addUserInfoWithPhoneAndBindRegister(
                            _self.receiveSpreadInfo.ouid,
                            _self.openid,
                            _self.mobile,
                            name
                        );
                        _self.ismasks = false;
                        _self.pushUrl("main",_self.personal);
                        }
                    );
                });
        },
        close() {
            this.ismask = false;
            // console.log(this.receiveSpreadInfo.ismask)
        },
    }
}
</script>
<style lang = "stylus" scoped>
.masks {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.9;
  z-index: 6;
}

.info {
  background: #47ab08;
  width: 80%;
  padding: 0.5rem 0;
  margin-left: 10%;
  margin-top: 40%;
  border-radius: .1rem;
}

.info>p {
  width: 100%;
  text-align: center;
  font-size: 0.32rem;
  line-height:.5rem;
  color: #ffffff;
}

.vcode {
  margin: 0.2rem auto;
  height: 0.8rem;
  width: 70%;
  border: 1px solid #fff;
  border-radius: 0.2rem;
}

.vcode>input {
  width: 50%;
}

.vcode>span {
  display: inline-table;
  line-height: 0.8rem;
  width: 42%;
  font-size: 0.32rem;
  height: 0.8rem;
  color: #fff;
  text-align: center;
}

.info .mobile {
  margin: 0.2rem auto;
  height: 0.8rem;
  width: 70%;
  border: 1px solid #fff;
  border-radius: 0.2rem;
}

input {
  color: #fff;
  width: 92%;
  padding-left: 6%;
  height: 0.8rem;
  line-height: 0.8rem;
  background-color: transparent;
  border: none;
}

.btns {
  display: flex;
  justify-content: space-around;
}

.btns .submit {
  width: 30%;
  background-color: #da9d55;
  border-radius: 0.4rem;
  font-size: 0.32rem;
  height: 0.6rem;
  margin: 0.3rem auto;
  text-align: center;
  line-height: 0.6rem;
  color: #fff;
}

.btns .sclose {
  width: 30%;
  background-color: #da9d55;
  border-radius: 0.4rem;
  font-size: 0.32rem;
  height: 0.6rem;
  margin: 0.3rem auto;
  text-align: center;
  line-height: 0.6rem;
  color: #fff;
}
</style>


